<div class="login-box">

  <div class="banner"></div>

  <div class="main flex flex-row">

    <div class="swiper" style="background: #eee ;">
      <!-- <iframe *ngIf="iframe" [src]="iframe" frameborder="0"
      style=""></iframe> -->

      <div class="adv-area"></div>

    </div>

    <div class="form">

      <div class="title">
        OkEDU 在线教室
      </div>

      <div class="form-item login-id">
        <div class="input-wrap flex flex-row">
          <span class="icon input-name login-name"></span>
          <input type="text" placeholder="Account NO." [formControl]="loginIdControl">
        </div>

        <div class="input-tip">
          <div class=" input-error" *ngIf="loginIdControl.invalid && (loginIdControl.dirty || loginIdControl.touched) && loginIdControl.errors.required">
            Account NO. is required.
          </div>

        </div>

      </div>

      <div class="form-item password">
        <div class="input-wrap flex flex-row">
          <span class="icon input-name login-password"></span>
          <input type="password" placeholder="Password" [formControl]="passwordControl">
        </div>
        <div class="input-tip">
          <div class=" input-error" *ngIf="passwordControl.invalid && (passwordControl.dirty || passwordControl.touched) && passwordControl.errors.required">
            Password is required.
          </div>
        </div>
      </div>

      <div class="control">
        <a  href="javascript:;" (click)="doRegister()" i18n>注册</a>
        <a  href="javascript:;" (click)="doForgot()" i18n>忘记密码?</a>
      </div>


      <div class="msg">
        <div class="tips" *ngIf="msg">
          {{msg}}
        </div>
      </div>


      <div class="buttons">
        <ng-template [ngIf]="!isLogin" [ngIfElse]="loading">
          <button class="btn" (click)="submit()" i18n>登录</button>
        </ng-template>
        <ng-template #loading>
          <button class="btn" i18n>登录...</button>
        </ng-template>
      </div>


    </div>
  </div>
</div>
